<template>
  <div
    class="nil-page"
    :style="{
      marginBottom: marginBottom,
    }"
  >
    <div class="nil-page__title" v-if="showHeader">
      <span class="nil-page__l">
        <slot name="nil-page__title">
          <el-icon
            v-if="icon"
            :size="iconSize"
            :color="iconColor"
            class="nil-page__icon"
          >
            <component v-if="iconType === 'component'" :is="icon"></component>
            <i v-else-if="iconType === 'iconfont'" class="iconfont" :class="icon"></i>
            <img v-else-if="iconType === 'image'" width="100%"  :src="icon" alt=""/>
          </el-icon>
          <span> {{ title }}</span>
        </slot>
      </span>
      <div class="option">
        <slot name="option"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { pageProps } from "./extra";

export default defineComponent({
  name: "NilPage",
  props: pageProps,
  setup() {
    return {};
  },
});
</script>

<style scoped></style>
